﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
@section styles{
    <style>
        .el-tabs--border-card > .el-tabs__content {
            padding: 2px;
        }
    </style>
}

<!-- demo root element -->
<div id="app">
    <div class="box box-primary">
        <div class="box-header">
            <ol class="breadcrumb" style="padding:0px;margin:1px;">
                <li><a href="/Distribute/Index"><i class="fa fa-dashboard"></i> 分销商品</a></li>
            </ol>
        </div>
        <div class="box-body">

            <div class="row" style="margin-bottom:10px;" slot="customSearch">
                <div class="col-xs-3 col-sm-2">
                    <input class="form-control" v-model="table.args.productCode" placeholder="商品编码/条码" debounce="500" />
                </div>
                <div class="col-xs-3 col-sm-2">
                    <input class="form-control" v-model="table.args.productName" placeholder="商品名称" debounce="500" />
                </div>
                @*<div class="col-xs-3 col-sm-2">
                        <brand-selector v-model="table.args.brandIds" placeholder="品牌"></brand-selector>
                    </div>
                    <div class="col-xs-3 col-sm-2">
                        <category-selector v-model="table.args.categoryId" placeholder="品类"></category-selector>
                    </div>*@
            </div>
            <el-row class="row-bottom">
                <el-col v-bind:sm="12" v-bind:md="12">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-primary btn-flat" v-on:click="loadData()">查 询</button>
                    </span>
                </el-col>
            </el-row>
            <el-tabs type="border-card" v-model="table.args.status" v-on:tab-click="handleClick">
                <el-tab-pane label="全部商品" name="0"></el-tab-pane>
                <el-tab-pane label="已配置" name="1"></el-tab-pane>
                <el-tab-pane label="未配置" name="2"></el-tab-pane>
            </el-tabs>
            <el-row>
                <el-col v-bind:span="24">
                    <el-table class="form-group" ref="$table" v-bind:data="table.rows" border style="width: 100%" v-bind:height="table.height">
                        @*<el-table-column type="selection" width="55"></el-table-column>*@
                        <el-table-column type="index"></el-table-column>
                        <el-table-column prop="ProductCode" label="商品编码" width="100"></el-table-column>
                        <el-table-column prop="ProductName" label="商品名称" width="200"></el-table-column>
                        <el-table-column prop="SalePrice" label="售价" width="80"></el-table-column>
                        <el-table-column prop="Rebate" label="分润金额" width="80"></el-table-column>
                        <el-table-column prop="LevelRebate1" label="一级分润" width="80"></el-table-column>
                        <el-table-column prop="LevelRebate2" label="二级分润" width="80"></el-table-column>
                        <el-table-column prop="LevelRebate3" label="三级分润" width="80"></el-table-column>
                        <el-table-column prop="LevelRebate4" label="四级分润" width="80"></el-table-column>
                        <el-table-column prop="LevelRebate5" label="五级分润" width="80"></el-table-column>
                        <el-table-column prop="LevelRebate6" label="六级分润" width="80"></el-table-column>
                        <el-table-column prop="LevelRebate7" label="七级分润" ></el-table-column>
                        <el-table-column label="操作" fixed="right" width="100">
                            <template slot-scope="scope">
                                <el-button-group>
                                    @*<el-button v-on:click="detailRow(scope.row)" size="small" type="primary">查看</el-button>*@
                                    <el-button v-on:click="edit(scope.row)" size="small" type="success">编辑</el-button>
                                    @*<el-button v-on:click="removeRow(scope.row)" v-if="scope.row.Status!=2" size="small" type="danger">删除</el-button>*@
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination v-bind:current-page="table.page.pageIndex" v-bind:page-size="table.page.pageSize" v-bind:total="table.page.total"
                                   layout="total,sizes,prev,pager,next,jumper"
                                   v-on:size-change="onPageSizeChange" v-on:current-change="onPageChange" background>

                    </el-pagination>
                </el-col>
            </el-row>

        </div>
        <!-- /.box-body -->
        <el-dialog title="配置商品分润"
                   v-bind:visible.sync="form.dialogVisible"
                   width="50%"
                   @*v-bind:before-close="save"*@>
            <el-form v-bind:model="form" status-icon v-bind:rules="formRule" ref="form" label-width="100px">
                <el-form-item label="商品编码" prop="ProductCode">
                    <el-input type="text" v-model="form.ProductCode" placeholder="商品编码" disabled></el-input>
                </el-form-item>
                <el-form-item label="商品名称" prop="ProductName">
                    <el-input type="text" v-model="form.ProductName" placeholder="商品名称" disabled></el-input>
                </el-form-item>
                <el-form-item label="分润金额" prop="Rebate">
                    <el-input-number size="medium" v-model="form.Rebate" :precision="2" :step="1" :min="0" :max="999999"></el-input-number>
                </el-form-item>
                <template v-for="item in form.Items">
                    <el-form-item v-bind:label="item.Level+'级分润'" prop="rebate">
                        <el-input-number size="medium" v-model="item.LevelRebate" :precision="2" :step="1" :min="0" :max="999999"></el-input-number>
                    </el-form-item>
                </template>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button v-on:click="form.dialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="save" v-bind:disabled="lock">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    <div class="clearfix"></div>
</div>

@section scripts{
    <script src="~/Content/vue/plugins/brand-selector/brand-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/category-selector/category-selector.js" type="text/javascript"></script>
    <script>

        // bootstrap the demo
        var demo = new Vue({
            components: {
            },
            el: '#app',
            data: {
                table: {
                    height: 450,
                    rows: [],
                    args: { productName: '', productCode: '', brandIds: '', categoryId: '', status: '0' },
                    page: { total: 0, pageIndex: 1, pageSize: global_config.page.pageSize },
                },
                form: {
                    dialogVisible: false,
                    Id:0,
                    ProductId: 0,
                    ProductCode: '',
                    ProductName: '',
                    Rebate: 0,
                    Items: []
                },
                lock: false,
                formRule: {

                }

            },
            methods: {

                onPageChange: function (page) {
                    this.table.page.pageIndex = page;
                    this.loadData();
                },
                onPageSizeChange: function (pageSize) {
                    this.table.page.pageSize = pageSize;
                    this.loadData();
                },
                loadData: function () {
                    var _self = this;
                    var url = "/Distribute/LoadData";
                    var data = Object.assign({}, _self.table.page, _self.table.args);
                    $.get(url, data, function (result) {
                        if (result.success) {
                            _self.table.rows = result.data;
                            _self.table.page.total = result.total;
                        }
                        else {
                            _self.$message({
                                message: result.error,
                                type: 'error'
                            });
                        }
                    }, "Json");
                },
                edit: function (row) {
                    // window.location.href = "/Distribute/Edit/" + row.Id;
                    this.form.dialogVisible = true;
                    this.getById(row.ProductId);
                },
                getById: function (id) {
                    var _self = this;
                    var url = "/Distribute/detail/" + id;
                    // var data = Object.assign({}, _self.table.page, _self.table.args);
                    $.get(url, {}, function (result) {
                        if (result.success) {
                            _self.form = Object.assign({}, _self.form, result.data);
                        }
                        else {
                            _self.$message({
                                message: result.error,
                                type: 'error'
                            });
                        }
                    }, "Json");
                },
                handleClick: function (tab, event) {
                    this.table.args.status = tab.name;
                    this.loadData();
                },
                save: function () {
                    var _self = this;
                    _self.lock = true;
                    _self.$refs.form.validate(function (valid) {
                        if (!valid) return false;
                        $.ajax({
                            method: "POST",
                            url: "/Distribute/Save",
                            contentType: 'application/json',
                            data: JSON.stringify(_self.form),
                            success: function (result) {
                                _self.form.dialogVisible = false;
                                _self.lock = false;
                                if (result.success) {
                                    _self.$message.success({
                                        message: "保存成功！"
                                    });
                                    _self.loadData();
                                }
                                else {
                                    _self.$message.error(result.error);
                                }
                            }
                        });
                    });
                }
            },

            created: function () {
                setListPage(this.table, 253);
                this.loadData();
            },
        })

    </script>
}




